<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  <style>
       .red{
        color: red;
        /*border: 1px solid;*/
       }
  </style>
	<script src='js/vue1.0.js'></script>
	<script type='text/javascript'>

			window.onload=function(){		
				  var vm=new Vue({
                      el:'#box',
                      data:{
                        // 这里的red为style里的red,这里面才是真正的class
                        a:true,
                        b:false,
              				   red:'red',
                         url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
                      },
                      methods:{
                          show:function(){
                             
                          },
                         
                      }
                      
				  });

			}

	</script>
</head>
<body>
   <div id="box">

            <!-- 注意：  花括弧只在普通属性里加 ，vue特定的指令里，不需要加{{}}符号！！！！！！ -->
   

           <!--  绑定属性的两种写法：         
                  1：v-bind:attr
                  2: :attr   (推荐) -->

              <!-- <img src={{url}} alt="">           -->
              <img v-bind:src="url" alt="666">
 
            <!-- 两个特殊属性 -->
            <!-- class style -->
 <!-- class第一种用法： -->
              <!-- 这里的red为data里的red -->
              <i :class="[red]">特殊属性第一种用法</i>

 <!-- class第二种用法： -->
              <!-- 这里json的red为真正的class -->
              <i :class="{red:true,bule:false}">特殊属性第二种用法</i>
   <!-- style和class用法一样  注意：复合样式一定要用驼峰命名法-->
   </div>
</body>
</html>